<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Datatables</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/oksub.css">
    <link rel="stylesheet" href="../../lib/datatables/media/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../lib/datatables/media/css/dataTables.jqueryui.css">
    <style>
    </style>
</head>
<body>
    <div class="ok-body">
        <!--模糊搜索区域-->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 ok-search">
                <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
                <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
                <input class="layui-input" placeholder="账号" autocomplete="off" name="username">
                <button class="layui-btn" lay-submit="" lay-filter="search">
                    <i class="layui-icon">&#xe615;</i>
                </button>
            </form>
        </div>
        <!--数据表格-->
        <table id="userTable" class="table table-striped table-bordered" cellspacing="0" width="100%"/>
    </div>
    <!--js逻辑-->
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../lib/datatables/media/js/jquery.js"></script>
    <script src="../../lib/datatables/media/js/jquery.dataTables.min.js"></script>
    <script src="../../lib/datatables/media/js/dataTables.jqueryui.js"></script>
    <script>
        layui.use(["element", "util", "form", "laydate", "okMock", "okUtils"], function () {
            let util = layui.util;
            let okMock = layui.okMock;
            let form = layui.form;
            let laydate = layui.laydate;

            util.fixbar({});

            laydate.render({elem: "#startTime", type: "datetime"});
            laydate.render({elem: "#endTime", type: "datetime"});

            $.fn.dataTable.defaults.oLanguage = {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索：",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }

            $("#userTable").DataTable({
                ajax: {
                    url: okMock.api.datatables,
                    type: "get",
                },
                columns: [
                    {data: "id", title: "ID"},
                    {data: "username", title: "账号"},
                    {data: "password", title: "密码"},
                    {data: "nickname", title: "昵称"},
                    {data: "name", title: "姓名"},
                    {data: "role", title: "角色"},
                    {data: "status", title: "状态"},
                    {data: "email", title: "邮箱"},
                    {data: "phone", title: "手机"},
                    {data: "createTime", title: "创建时间"},
                    {data: "updateTime", title: "更新时间"},
                ]
            });

            form.on("submit(search)", function (data) {
                return false;
            });
        });
    </script>
</body>
</html>
